<template>
  <div id="inviteWithdrawal">
    <h1 class="con-right-title">转介绍提现记录</h1>
    <topSearch @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button class="keepRight" type="success" @click="exportFileAll">
        导出Excel
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column label="邀请人" prop="userName" align="center">
      </el-table-column>
      <el-table-column label="邀请人大鹏号" prop="dpAccount" align="center">
      </el-table-column>
      <el-table-column
        label="邀请人手机号"
        prop="phone"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="最新提现时间"
        prop="newWithdrawTime"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="提现总金额"
        prop="sumWithdrawMoney"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="提现次数"
        prop="sumWithdrawMoney"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="剩余可提现金额" min-width="100" align="center">
        <template slot-scope="{ row }">
          <span>{{ 100 - row.sumWithdrawMoney }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" min-width="100" align="center">
        <template v-slot="{ row }">
          <span v-if="row.activityStatus == 'NOT_STARTED'">未开始</span>
          <span v-if="row.activityStatus == 'ONGOING'">进行中</span>
          <span v-if="row.activityStatus == 'OVER'">已结束</span>
        </template>
      </el-table-column>
      <el-table-column
        label="活动名称"
        prop="activityName"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="提现状态" min-width="100" align="center">
        <template v-slot="{ row }">
          <span v-if="row.giveOffStatus == 'YES'">已发放</span>
          <span v-if="row.giveOffStatus == 'NO'">未发放</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button type="text" @click="withdrawal(row)">提现</el-button>
          <el-button type="text" @click="withdrawalDetail(row)">
            提现明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pageCom
      :searchParams="searchParams"
      @searchList="searchList"
      :total="total"
    ></pageCom>
    <!--  提现 -->
    <withdrawDialog
      v-if="dialogFormVisible"
      :showDialog.sync="dialogFormVisible"
      :withdrawAllMoney="withdrawAllMoney"
      :id="id"
    ></withdrawDialog>
    <!-- 提现明细弹窗 -->
    <chooseBounced
      v-if="chooseBouncedData.isShow"
      :dialogData="chooseBouncedData"
    ></chooseBounced>
  </div>
</template>

<script>
import topSearch from './topSearch'
import chooseBounced from './chooseBounced'
import withdrawDialog from './withdrawDialog'
import { getWithdrawList } from '@/api/activityCenter/activityManage/inviteHaveGift'
export default {
  components: {
    topSearch,
    chooseBounced,
    withdrawDialog
  },
  data() {
    return {
      id: '',
      total: 0,
      loading: false,
      tableData: [],
      dialogFormVisible: false,
      withdrawAllMoney: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      chooseBouncedData: { isShow: false }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      getWithdrawList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.tableData = res.rows
          this.total = res.total
        },
        () => {
          this.loading = false
        }
      )
    },
    /*全部导出 */
    exportFileAll() {
      this.$confirm('确定导出提现记录吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let url = '/activities/recommends-reward/export'
          this.downFile('get', url, this.formInline, '邀请提现信息')
        })
        .catch(() => {})
    },
    /* 搜索 */
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    /* 提现 */
    withdrawal(row) {
      this.withdrawAllMoney = row.sumWithdrawMoney
      this.dialogFormVisible = true
      this.id = row.id
    },
    /* 提现明细 */
    withdrawalDetail({ activityId, userId }) {
      this.chooseBouncedData = { isShow: true, activityId, userId }
    }
  }
}
</script>

<style lang="less" scoped></style>
